<!-- 
	* 地图选点组件 | 腾讯位置服务
	* H5端才用到(小程序和APP上用uni.chooseLocation方法)，需要有腾讯地图的key。申请地址：https://lbs.qq.com/webApi/component/componentGuide/componentPicker
	* 引用：一、public/index.html里引入：<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
	* 	   二、manifest.json里【H5配置】->[定位和地图]，勾选【腾讯地图】
	* 
 -->
<template>
	<div class="h-100">
		<!-- <web-view :src="txSrc"></web-view> -->
		<!-- <div id="container" class="w-100" :style="{ height: '45%' }"></div> -->
		<iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=DAEBZ-5UO6P-PKXDO-LCBOE-6ZDUF-MJBFD&referer=saas">
		</iframe>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// txMapKey: 'DAEBZ-5UO6P-PKXDO-LCBOE-6ZDUF-MJBFD', /* 这个是波程的QQ号申请的 */
				// txSrc: `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${this.$config.txMapKey}&referer=qxym`
				// txMapKey: 'N64BZ-LKJ6J-VN3FT-F436L-DE5UV-GAFSH', /* 强哥的QQ号申请的 TODO */
				txSrc: `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=N64BZ-LKJ6J-VN3FT-F436L-DE5UV-GAFSH&referer=saas` 
			}
		},
        mounted() {
			window.addEventListener('message', e => {
				this.$utils.uDebounce(() => {
					console.log(222)
					// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
					var loc = e.data;
					if (loc && loc.module == 'locationPicker') {
					    //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
					    console.log('location', loc);
						const locationData = {
							lat: loc.latlng.lat,
							lng: loc.latlng.lng,
							addressDetail: loc.poiaddress + loc.poiname,
							region: loc.cityname || loc.poiname || '获取中' // 有地区显示地区，没地区就显示城市，再没城市就显示省份
						};
						this.$store.commit('setLocation', locationData);
					    this.$router.go(-1);
					}
				})
			  //   this.$utils.debounce(() => {
					// console.log(222)
			  //       // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
			  //       var loc = e.data;
			  //       if (loc && loc.module == 'locationPicker') {
			  //           //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
			  //           console.log('location', loc);
					// 	const locationData = {
					// 		lat: loc.latlng.lat,
					// 		lng: loc.latlng.lng,
					// 		addressDetail: loc.poiaddress + loc.poiname,
					// 		region: loc.cityname || loc.poiname || '获取中' // 有地区显示地区，没地区就显示城市，再没城市就显示省份
					// 	};
					// 	this.$store.commit('setLocation', locationData);
			  //           this.$navigateBack()//如果用$switchTab跳index的话，会出现点击穿透的问题
			  //       }
			  //   });
			});
        },
		onHide() {
			window.removeEventListener();
		},
		methods: {
		}
	}
</script>
